<template>
  <div class="picture">
    <!-- top -->
    <TopView name="picture" title="照片墙" msg="留一片空白，随时浓墨重彩"></TopView>

    <!-- 显示照片 -->
    <div class="list">
      <!-- 标题 -->
      <TitleFlagView icon="fa fa-tags" title="图片列表"></TitleFlagView>

      <div class="content">
        <div class="pic_wrap" v-for="item in imageList" :key="item.id">
          <div class="detail">
            <h3>{{ item.name }}</h3>
            <h5>{{ item.description }}</h5>
          </div>
          <el-image :src="item.path" :alt="item.description" lazy fit="cover" :preview-src-list="srcList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopView from '@/components/TopView.vue'
import TitleFlagView from '@/components/TitleFlagView.vue'
import pictureApi from '@/api/picture'
export default {
  name: 'PictureView',
  components: {
    TopView,
    TitleFlagView
  },
  data() {
    return {
      imageList: [],
      srcList: []
    }
  },
  created() {
    this.getPictures()
  },
  methods: {
    getPictures() {
      pictureApi.getPictures().then(res => {
        this.imageList = res.data.data
        for (const i in res.data.data) {
          this.srcList.push(res.data.data[i].path)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.picture {
  width: 100%;
  height: auto;

  .list {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .content {
      width: 100%;
      height: auto;
      margin-bottom: 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-flow: row wrap;

      .pic_wrap {
        display: block;
        width: 25%;
        height: calc(40vh - 2em);
        min-height: 20em;
        transition: all 0.4s; //给图片添加过渡效果 对宽高有一个0.4s的过渡
        position: relative;

        .detail {
          position: absolute;
          top: 10px;
          left: 10px;
          color: #fff;

          h3 {
            margin-bottom: 5px;
          }
        }

        .el-image {
          height: 100%;
          width: 100%;
          vertical-align: middle;
          max-width: 100%;
        }
      }
      .pic_wrap:hover {
        transform: scale(1.1); //当鼠标经过时div里面的图片宽高同时变为原来的1.1倍
        cursor: pointer;
        z-index: 1;
      }
    }
  }
}
</style>
